<!--客户定位tab切换组件-->
<template>
  <div class="order-list-box">
    <tab-btn
      :data="tabsData"
      :current-index="currentIndex"
      @tabsChange="tabsChangeHandle"
    ></tab-btn>
    <div class="contain">
      <transition name="fade" mode="out-in">
        <keep-alive>
          <component
            v-bind:is="whichComp"
            v-bind="$attrs"
            v-on="$listeners"
            @changeTab="changeTab"
          ></component>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
import TabBtn from "@/components/customer/tabpage/TabBtn";
import saleCase from "@/components/order/SaleCase";
import carryingOrder from "@/components/order/CarryOrder";
import dismantlingList from "@/components/order/DismList";
export default {
  name: "OrderList",
  data() {
    return {
      tabsData: [
        {
          name: "在途订单",
          icon: "el-icon-s-order",
        },
        {
          name: "销售品实例",
          icon: "el-icon-s-order",
        },
        {
          name: "拆机单",
          icon: "el-icon-s-order",
        },
      ],
      currentIndex: 0,
      whichComp: carryingOrder,
    };
  },
  props: {},
  mounted() {},
  created() {},
  components: {
    TabBtn,
    carryingOrder,
    saleCase,
    dismantlingList,
  },
  methods: {
    tabsChangeHandle(index) {
      this.currentIndex = index;
      switch (this.currentIndex) {
        case 0:
          this.whichComp = carryingOrder;
          break;
        case 1:
          this.whichComp = saleCase;
          break;
        case 2:
          this.whichComp = dismantlingList;
          break;
      }
    },
    changeTab(tabConfig) {
      this.$emit("changeTabCon", tabConfig);
    },
  },
};
</script>

<style lang="scss" scoped>
.order-list-box {
  ::v-deep .ne-line {
    margin: 0 !important;
  }
  .contain {
    padding: 0.2rem 0rem;
    //height: calc(100vh - 3rem);
    height: auto;
    overflow-y: auto;
  }
  .tagsbox {
    margin: 0.1rem 0.3rem 0 0.1rem;
  }
}
</style>
